<template>
    <a-tree class="a-menu" :size="size" :items="items" :getItemsFunc="getItemsFunc" :getKeyFunc="getNameFunc"
        :getIsFolderFunc="getIsFolderFunc" :getIsItemOpenedFunc="isItemOpened">
        <template v-slot:foldName="{ item, depth, opened }">
            <div class="c-f-h c-f-start-center">
                <div class="c-f-h c-f-start-center">
                    <div :class="`c-square-${size}`" v-for="n in depth" :key="n"></div>
                </div>
                <a-button class="c-f-h c-f-between-center" :color="color" :size="size" :block="true" :sharp="true"
                    :plain="true" @click="
                        $emit('item-click', item)
                    $emit('fold-click', item)
                    toggleItem(item);
                    ">
                    <span>{{ getNameFunc(item) }}</span>
                    <span class="fa fa-fw fa-angle-right" v-if="!opened"></span>
                    <span class="fa fa-fw fa-angle-down" v-else></span>
                </a-button>
            </div>
        </template>
        <template v-slot:file="{ item, depth }">
            <div class="c-f-h c-f-start-center">
                <div class="c-f-h c-f-start-center">
                    <div :class="`c-square-${size}`" v-for="n in depth" :key="n"></div>
                </div>
                <a-button :color="color" :size="size" :block="true" :sharp="true" :plain="true" align="left"
                    :active="currentActiveItem == item" @click="
                        $emit('item-click', item)
                    $emit('file-click', item)
                    currentActiveItem = item;
                    ">
                    {{ getNameFunc(item) }}
                </a-button>
            </div>
        </template>
    </a-tree>
</template>

<script>
import AControlGroup from './AControlGroup.vue'
import AButton from './AButton.vue'
import ATree from './ATree.vue'
export default {
    name: 'AMenu',
    emits: ['item-click', 'fold-click', 'file-click'],
    components: { AControlGroup, AButton, ATree },
    props: {
        color: {
            type: String,
            default: 'default',
        },
        size: {
            type: String,
            default: 'm',
        },
        items: {
            type: Array,
            default: []
        },
        getItemsFunc: {
            type: Function,
            default: a => a.items,
        },
        getNameFunc: {
            type: Function,
            default: a => a.name,
        },
        getIsFolderFunc: {
            type: Function,
            default: a => a.type == 0,
        }
    },
    data() {
        return {
            openedItemSet: new Set(),
            currentActiveItem: null,
        }
    },
    methods: {
        toggleItem(item) {
            if (this.isItemOpened(item)) {
                this.openedItemSet.delete(item)
            } else {
                this.openedItemSet.add(item)
            }
        },
        isItemOpened(item) {
            return this.openedItemSet.has(item)
        },
        /**
         * 折叠所有
         */
        foldAll() {
            this.openedItemSet.clear()
        },
        /**
         * 主动激活菜单项，会同时打开包含其的文件夹，但是不会触发item-click、fold-click、file-click事件
         */
        activeItem(toActiveItem) {
            this.currentActiveItem = toActiveItem
            let toCheckList = [...this.items.map(a => [a, null])]
            while (toCheckList.length) {
                let [item, parent] = toCheckList.shift()
                if (item == toActiveItem) {
                    parent && this.openedItemSet.add(parent)
                    return
                }
                if (item.files) {
                    toCheckList.push(...item.files.map(a => [a, item]))
                }
            }
        },
    }
}
</script>